<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jquery下拉插件使用详细</title>
		<link rel="stylesheet" href="css/jquery.select-1.1.0.css" />
		<style type="text/css">
			body{
				background: #F5F5F5;
			}
			i.icon{
				display: inline-block;
				height: 16px;
				width: 40px;
				position: relative;
				top: 3px;
				background: url() no-repeat center center;
			}
		</style>
	</head>
	<body>
	    <!---->
		<input type="" name="" id="" value=""  />
		<div class="sn-selectContent1" style="display: inline-block;"></div>
		<div class="sn-selectContent2" style="display: inline-block;"></div>
		<div class="sn-selectContent3" style="display: inline-block;"></div>
		<div class="sn-selectContent4" style="display: inline-block;"></div>
		<input type="" name="" id="" value="" />
		<hr>
		
		<div class="sn-list"></div>
		
	</body>
	<script type="text/x-dot-template" id="select_list">
		{{? it}}
			{{~it.data : order : index}}
				<li class="{{= it.className }}" {{= it.mark }} = "{{= it.id}}"   data-value="{{= order.v }}" data-text="{{= order.t }}" title="{{= order.t }}" ><i class="icon"></i>{{= order.t }}</li>
			{{~}}
		{{?}}
	</script>
	<script type="text/x-dot-template" id="select_list1">
		{{? it}}
			{{~it.data : order : index}}
				<li class="{{= it.className }}" {{= it.mark }} = "{{= it.id}}"   data-value="{{= order }}" data-text="{{= order }}" >{{= order < 10 ? '0'+order : order  }}</li>
			{{~}}
			{{? it.data.length == 0}}
				<li class="{{= it.className }}" {{= it.mark }} = "{{= it.id}}"   data-value="" data-text="请选择" >请选择</li>
			{{?}}
		{{?}}
	</script>
	<script type="text/javascript" src="js/jquery.min-1.7.2.js" ></script>
	<script type="text/javascript" src="js/dot.js" ></script>
	<script type="text/javascript" src="js/jquery.select-1.1.3.js" ></script>
	<script type="text/javascript">
	    
		var city = [{ v: 11, t :"北京" },
					{ v : 12,t : "天津" },
					{ v : 13,t : "河北" },
					{ v : 14,t : "山西" },
					{ v : 15,t : "内蒙古" },
					{ v : 21,t : "辽宁" },
					{ v : 22,t : "吉林" },
					{ v : 23,t : "黑龙江" },
					{ v : 31,t : "上海" },
					{ v : 32,t : "江苏" },
					{ v : 33,t : "浙江" },
					{ v : 34,t : "安徽" },
					{ v : 35,t : "福建" },
					{ v : 36,t : "江西" },
					{ v : 37,t : "山东" },
					{ v : 41,t : "河南" },
					{ v : 42,t : "湖北" },
					{ v : 43,t : "湖南" },
					{ v : 44,t : "广东" },
					{ v : 45,t : "广西" },
					{ v : 46,t : "海南" },
					{ v : 50,t : "重庆" },
					{ v : 51,t : "四川" },
					{ v : 52,t : "贵州" },
					{ v : 53,t : "云南" },
					{ v : 54,t : "西藏" },
					{ v : 61,t : "陕西" },
					{ v : 62,t : "甘肃" },
					{ v : 63,t : "青海" },
					{ v : 64,t : "宁夏" },
					{ v : 65,t : "新疆" },
					{ v : 71,t : "台湾" },
					{ v : 81,t : "香港" },
					{ v : 82,t : "澳门" },
					{ v : 100,t : "这里是一个很长的选项" },
					{ v : 91,t : "国外" }]
		var setCity = [{ v: 11, t :"北京" },
					{ v : 12,t : "天津" },
					{ v : 13,t : "河北" },
					{ v : 14,t : "山西" },
					{ v : 15,t : "内蒙古" },
					{ v : 21,t : "辽宁" }]

		function getDate(){
			var r = [];
			for(var i = new Date().getFullYear(),l = new Date().getFullYear()-100 ; i > l ;i-- ){
				r.push(i);
			}
			return r;
		}


		function getA(min,max){
			var r = [];
			for(; min <= max ; min++ ){
				r.push(min);
			}
			return r;
		}


		var select1 = $(".sn-selectContent1").Select({
			data : setCity,
			inputClassName : "sn-inputCity1",
			inputName : "city1",
			inputIdName : "city1",
			placeholder : "选择地区-",
			selectBarClassName : "btnCity",
			selectBarIdName : "btnCity",
			selectBarName : "btnCity",
			defaultIndex : -1,
			width : 180,
			height : 30,
			optionHeight : 40,
			source : "html",
			listTemplate : "#select_list",
			select : function (currentValue,index,id) {
				console.log(currentValue,index,id);
			},
			change : function(currentValue, $this, id){
			    console.log(currentValue, $this, id , 'change');
			},
			show : function(state,id){
			    console.log(state,id);
			}
		})

		//select1.setData([{ v : 0,t : "请选择" }]);


		var select4 = $(".sn-selectContent4").Select({
			data : [],
			inputClassName : "sn-day",
			inputName : "day",
			inputIdName : "day",
			defaultIndex : -1,
			placeholder : "日",
			width : 100,
			source : "html",
			listTemplate : "#select_list1",
			select : function (currentValue,index) {
				console.log(currentValue,index);
			}
		})

		var select3 = $(".sn-selectContent3").Select({
			data : [],
			inputClassName : "sn-month",
			inputName : "month",
			inputIdName : "month",
			defaultIndex : -1,
			placeholder : "月",
			width : 100,
			source : "html",
			listTemplate : "#select_list1",
			select : function (currentValue,index) {
				var maxDay = new Date(select2.getValue(),currentValue,0).getDate();
				console.log(maxDay);
				select4.setData(getA(1,maxDay));
			}
		})

		var select2 = $(".sn-selectContent2").Select({
			data : getDate(),
			inputClassName : "sn-year",
			inputName : "year",
			inputIdName : "year",
			placeholder : "年",
			defaultIndex : -1,
			width : 100,
			listTemplate : "#select_list1",
			select : function (currentValue,index) {
					select3.setData([1,2,3,4,5,6,7,8,9,10,11,12]);
					var maxDay = new Date(currentValue,select3.getValue(),0).getDate();
					console.log(maxDay);
					select4.setData(getA(1,maxDay));
			}
		})

		console.log(select1,select2,select3,select4);
	</script>
</html>
